<template>
	<view class="content">
		<view class="send">
			<view class="form">
				<view class="formItem f16 mgb16">
					<view class="text">{{showFormData.wcNo}}</view>
					<view class="text rightTime hascolor">时运高</view>
				</view>
				<view class="formItem f16">
					<view class="text">
						<icon class="iconfont iconshijian1 lefticon" type="" />
					</view>
					<view class="textT">{{showFormData.svcDate? showFormData.svcDate.split('.')[0].split(' ')[0]:'' }}</view>
					<view class="text rightTime">{{showFormData.svcDate?showFormData.svcDate.split('.')[0].split(' ')[1].substr (0,5):''}}</view>
				</view>
				<view class="formItem f16">
					<view class="text">费用</view>
					<view class="text">{{showFormData.svcCost}}</view>
				</view>
				<view class="formItem f16 mgb16">
					<view class="text">保修</view>
					<view class="text2">{{showFormData.warrantyEndDate ?showFormData.warrantyEndDate.split(' ')[0]:''}}</view>
					<view class="text rightTime btn" v-if="option.isActive==3">在保</view>
					<view class="text rightTime btned" v-else>过保</view>
				</view>
				<view class="formItem f16 ">
					<view class="text">服务</view>
					<view class="text2">{{showFormData.svcType}}</view>
				</view>
				<view class="formItem f16 ">
					<view class="text">门型</view>
					<view class="text2">{{showFormData.doorType}}</view>
				</view>
				<view class="formItem f16 mgb16">
					<view class="text">锁型</view>
					<view class="text2">{{showFormData.lockType}}</view>
				</view>
				<view class="textare f16">
					<view class="fakeInput">
						<view class="text">详情</view>
						<view class="fake">填写更换或维修的内容</view>
					</view>
					<view class="textart">
						<textarea :value="showFormData.content" placeholder=" " class="biginput" disable="disable" />
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>


<script>
	 import formItem from '@/components/formItem/formItem';
	export default {
		components:{
			formItem
		},
		data() {
			return {
				isfocus:true,
				option:'',
				showFormData:{}
			}
		},
		onLoad(option) {
			console.log(option)
			this.option = option
			this.gets_detailOnMini(option.wcId)
		},
		methods: {
			onchange(){},
			gets_detailOnMini(wcId){
				this.postApi('s_detailOnMini','POST',{
					data:{wcId},
					loading:true
				}).then(res=>{
					console.log('resssss',res)
					this.showFormData=res.data
				})
			}
		}
	}
</script>

<style lang="less">
	@import '@/common/common.less';
	.content{
		display: flex;
		flex-direction: column;
		height: 100%;
		.topButton{
			height: 104rpx;
			background-color: #FFFFFF;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 17rpx;
			.lefticon{
				margin-left: 40rpx;
				color: @primary-color;
				font-size: 18px;
			}
			.button{
				width: 112rpx;
				height: 60rpx;
				background-color: @primary-color;
				text-align: center;
				line-height: 60rpx;
				margin-right: 33rpx;
				border-radius: 10rpx;
				color: #FFFFFF;
			}
		}
		.already,.send{
			.cost{
				background-color: #FFFFFF;
				margin-bottom: 16rpx;
			}
			.form{
				.formItem{
					border-bottom: 1rpx solid #e1e1e1;
					display: flex;
					flex-direction: row;
					padding-left: 39rpx;
					height: 101rpx;
					align-items: center;
					position: relative;
					background-color: #FFFFFF;
					.lefticon{
						margin-right: 28rpx;
						color: @primary-color;
					}
					.text{
						color: #555555;
						margin-right: 60rpx;
						width: 144rpx;
					}
					.text2{
						color: #555555;
						margin-right: 60rpx;
					}
					.rightTime{
						position: absolute;
						right: 0;
						margin-right:0 ;
					}
					.hascolor{
						color: @primary-color;
					}
					.btn{
						background-color: @primary-color;
						width: 90rpx;
						color: #FFFFFF;
						text-align: center;
						border-radius:6rpx ;
						padding: 5rpx 0;
						margin-right: 50rpx;
					}
					.btned{
						background-color: #7f7f7f;
						width: 90rpx;
						color: #FFFFFF;
						text-align: center;
						border-radius:6rpx ;
						padding: 5rpx 0;
						margin-right: 50rpx;
					}
					.edbtn{
						background-color: #7f7f7f;
					}
				}
				.mgb16{
					margin-bottom: 16rpx;
				}
				.focus{
					border-bottom: 1rpx solid @primary-color;
				}
				.textare{
					border-bottom: 1rpx solid #e1e1e1;
					display: flex;
					flex-direction: column;
					padding-left: 39rpx;
					position: relative;
					background-color: #FFFFFF;
					padding-top: 10rpx;
					padding-bottom:40rpx;
					.fakeInput{
						display: flex;
						flex-direction: row;
						.text{
							margin-right: 20rpx;
							width: auto;
						}
						.fake{
							color: #d7d7d7;
						}
					}
					.text{
						color: #555555;
						margin-right: 60rpx;
						width: 144rpx;
					}
					.biginput{
						margin-top:15rpx;
						width: 90%;
						border: 1rpx solid #e1e1e1;
						padding:10rpx;
						min-height: 200rpx;
						vertical-align: middle;
					}
				}
			}
			
		}
		
	}
	
</style>
